<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon.png">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        AntRpc Console
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="/css/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/fontawesome-v5.7.1-all.css">
    <!-- CSS Files -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/now-ui-dashboard.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
    <link href="/css/my.css" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->

</head>
<body>
<div class="wrapper ">
    <div th:replace="~{common :: #common-sidebar}"></div>
    <div class="main-panel" id="main-panel">
        <nav id="common-logs-nav" class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
            <div class="container-fluid my-padding-left-top-0">
                <div th:replace="~{common :: #commons-nav-btns}"></div>
                <div class="collapse navbar-collapse justify-content-end w-100" id="logs-navigation">
                </div>
            </div>
        </nav>
        <div class="panel-header panel-header-sm"></div>
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row">
                                        <label for="datetime_range" class="col-md-2 col-form-label text-right">
                                            时间范围
                                        </label>
                                        <div class="col-md-10">
                                            <div class="form-group">
                                                <input type="text" id="datetime_range"
                                                       class="form-control datetimepicker" th:value="${args.range}"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="row">
                                        <label class="col-md-2 col-form-label">
                                            搜索关键字
                                        </label>
                                        <div class="col-md-10">
                                            <div class="form-group">
                                                <input id="keyword" type="text" class="form-control"
                                                       th:value="${args.keyword}"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-info mt-0" onclick="logs_query();">查询</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">日志列表(符合条件的最近200条)</h5>
                            <ul th:if="${datas.totalPage > 0}" class="pagination">
                                <li th:class="${idx == datas.page ? 'page-item active' : 'page-item'}"
                                    th:each="idx:${#numbers.sequence(1, datas.totalPage)}">
                                    <a class="page-link" href="javascript:void(0);"
                                       th:onclick="'goto_page('+ ${idx} +')'" th:text="${idx}"></a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive" style="height: 600px !important;">
                                <table class="table">
                                    <thead class="text-primary">
                                    <tr>
                                        <th>#</th>
                                        <th>操作</th>
                                        <th>源应用</th>
                                        <th>源IP</th>
                                        <th>调用栈</th>
                                        <th>链路标识</th>
                                        <th>Caller</th>
                                        <th>请求ID</th>
                                        <th>时间</th>
                                        <th>目标应用</th>
                                        <th>目标IP</th>
                                        <th>类名</th>
                                        <th>方法名</th>
                                        <th>请求参数</th>
                                        <th>响应(ms)</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="it, itStat : ${datas.callLogsVOS}">
                                        <td th:text="${itStat.index + 1}"></td>
                                        <td>
                                            <button type="button" rel="tooltip" title="显示整个调用链路图谱"
                                                    class="btn btn-info btn-icon btn-sm "
                                                    th:attr="data-serialNumber=${it.serialNumber}, data-requestId=${it.requestId}"
                                                    onclick="show_all_call_graphs(this);">
                                                <i class="now-ui-icons location_compass-05"></i>
                                            </button>
                                        </td>
                                        <td th:text="${it.appName}"></td>
                                        <td th:text="${it.ipAndPort}"></td>
                                        <td th:text="${it.previousStackTrace}"></td>
                                        <td th:text="${it.serialNumber}"></td>
                                        <td th:text="${it.caller}"></td>
                                        <td th:text="${it.requestId}"></td>
                                        <td th:text="${it.date}"></td>
                                        <td th:text="${it.targetAppName}"></td>
                                        <td th:text="${it.targetIpAndPort}"></td>
                                        <td th:text="${it.targetClassName}"></td>
                                        <td th:text="${it.targetMethodName}"></td>
                                        <td th:text="${it.requestArgs}"></td>
                                        <td th:text="${it.rt}"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:insert="js"></div>
<script>

    function show_all_call_graphs(btn) {
        var serialNumber = $(btn).attr("data-serialNumber");
        var requestId = $(btn).attr("data-requestId");
        window.location.href = "/call_graphs?sn=" + serialNumber + "&rid=" + requestId;
    }

    function goto_page(idx) {
        logs_query(idx);
    }

    function logs_query(idx) {
        var range = $("#datetime_range").val();
        var keyword = $.trim($("#keyword").val());
        window.location.href = "/logs?keyword=" + keyword + "&range=" + range + (idx ? "&page=" + idx : "");
    }

    $(document).ready(function () {
        $("#call_logs_li").addClass("active");

        $("#datetime_range").daterangepicker({
            opens: "left",
            timePicker: true,
            timePicker24Hour: true,
            minDate: moment().add(-7, "day"),
            maxDate: moment().add(2, "minutes"),
            locale: {
                format: "YYYY-MM-DD HH:mm",
                separator: "~",
                applyLabel: "确定",
                cancelLabel: "取消",
                fromLabel: "开始",
                toLabel: "结束",
                daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
            }
        }, function (start, end, label) {

        }).on("apply.daterangepicker", function () {

        });

    });

</script>
</body>
</html>